<template>
  <Layout>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 精选文章 -->
      <section v-if="featuredPosts.length > 0" class="mb-12">
        <h2 class="text-2xl font-bold mb-6">精选文章</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <article
            v-for="featured in featuredPosts"
            :key="featured.id"
            class="bg-white rounded-lg shadow-md overflow-hidden"
          >
            <img
              v-if="featured.featured_image"
              :src="`/storage/${featured.featured_image}`"
              :alt="featured.title"
              class="w-full h-48 object-cover"
            />
            <div class="p-6">
              <div class="flex items-center text-sm text-gray-500 mb-2">
                <span>{{ featured.category?.name }}</span>
                <span class="mx-2">•</span>
                <span>{{ formatDate(featured.published_at) }}</span>
              </div>
              <h3 class="text-xl font-semibold mb-2">
                <Link
                  :href="`/posts/${featured.slug}`"
                  class="hover:text-blue-600"
                >
                  {{ featured.title }}
                </Link>
              </h3>
              <p class="text-gray-600 mb-4">{{ truncate(featured.excerpt, 100) }}</p>
              <div v-if="featured.user" class="flex items-center">
                <img
                  :src="featured.user?.avatar_url || `https://ui-avatars.com/api/?name=${featured.user?.name || 'User'}`"
                  :alt="featured.user?.name || 'User'"
                  class="w-8 h-8 rounded-full mr-2"
                />
                <span class="text-sm text-gray-600">{{ featured.user?.name || 'Anonymous' }}</span>
              </div>
            </div>
          </article>
        </div>
      </section>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 文章列表 -->
        <div class="lg:col-span-2">
          <h2 class="text-2xl font-bold mb-6">最新文章</h2>

          <div v-if="posts.data.length > 0" class="space-y-6">
            <article
              v-for="post in posts.data"
              :key="post.id"
              class="bg-white rounded-lg shadow-md overflow-hidden"
            >
              <div class="md:flex">
                <div v-if="post.featured_image" class="md:w-1/3">
                  <img
                    :src="`/storage/${post.featured_image}`"
                    :alt="post.title"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div class="p-6" :class="post.featured_image ? 'md:w-2/3' : ''">
                  <div class="flex items-center text-sm text-gray-500 mb-2">
                    <Link
                      :href="`/categories/${post.category.slug}`"
                      class="hover:text-blue-600"
                    >
                      {{ post.category.name }}
                    </Link>
                    <span class="mx-2">•</span>
                    <span>{{ formatDate(post.published_at) }}</span>
                    <span class="mx-2">•</span>
                    <span>{{ post.reading_time }} 分钟阅读</span>
                  </div>

                  <h2 class="text-xl font-semibold mb-2">
                    <Link
                      :href="`/posts/${post.slug}`"
                      class="hover:text-blue-600"
                    >
                      {{ post.title }}
                    </Link>
                  </h2>

                  <p class="text-gray-600 mb-4">{{ truncate(post.excerpt, 150) }}</p>

                  <div class="flex items-center justify-between">
                    <div v-if="post.user" class="flex items-center">
                      <img
                        :src="post.user?.avatar_url || `https://ui-avatars.com/api/?name=${post.user?.name || 'User'}`"
                        :alt="post.user?.name || 'User'"
                        class="w-8 h-8 rounded-full mr-2"
                      />
                      <Link
                        :href="`/authors/${post.user?.username || '#'}`"
                        class="text-sm text-gray-600 hover:text-blue-600"
                      >
                        {{ post.user?.name || 'Anonymous' }}
                      </Link>
                    </div>

                    <div class="flex items-center space-x-4 text-sm text-gray-500">
                      <span class="flex items-center">
                        👁️ {{ post.views_count }}
                      </span>
                      <span class="flex items-center">
                        ❤️ {{ post.likes_count }}
                      </span>
                      <span class="flex items-center">
                        💬 {{ post.comments_count }}
                      </span>
                    </div>
                  </div>

                  <div v-if="post.tags.length > 0" class="mt-4">
                    <Link
                      v-for="tag in post.tags"
                      :key="tag.id"
                      :href="`/tags/${tag.slug}`"
                      class="inline-block bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs mr-2 hover:bg-gray-200"
                    >
                      #{{ tag.name }}
                    </Link>
                  </div>
                </div>
              </div>
            </article>
          </div>

          <div v-else class="bg-white rounded-lg shadow-md p-8 text-center">
            <p class="text-gray-500">暂无文章</p>
          </div>

          <!-- 分页 -->
          <div v-if="posts.links" class="mt-8">
            <nav class="flex justify-center">
              <!-- 这里可以添加分页组件 -->
            </nav>
          </div>
        </div>

        <!-- 侧边栏 -->
        <aside>
          <!-- 搜索 -->
          <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">搜索</h3>
            <form @submit.prevent="search">
              <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索文章..."
                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </form>
          </div>

          <!-- 分类 -->
          <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-semibold mb-4">分类</h3>
            <ul class="space-y-2">
              <li v-for="category in categories" :key="category.id">
                <Link
                  :href="`/categories/${category.slug}`"
                  class="flex justify-between items-center text-gray-700 hover:text-blue-600"
                >
                  <span>{{ category.name }}</span>
                  <span class="text-sm text-gray-500">({{ category.posts_count }})</span>
                </Link>
              </li>
            </ul>
          </div>

          <!-- 热门标签 -->
          <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">热门标签</h3>
            <div class="flex flex-wrap gap-2">
              <Link
                v-for="tag in popularTags"
                :key="tag.id"
                :href="`/tags/${tag.slug}`"
                class="inline-block bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-600"
              >
                {{ tag.name }}
              </Link>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </Layout>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
import { Inertia } from '@inertiajs/inertia'
import Layout from '../../Components/Layout.vue'

export default {
  name: 'BlogIndex',
  components: {
    Layout,
    Link
  },
  props: {
    posts: Object,
    featuredPosts: Array,
    categories: Array,
    popularTags: Array,
    filters: Object
  },
  data() {
    return {
      searchQuery: this.filters.search || ''
    }
  },
  methods: {
    search() {
      Inertia.get('/', { search: this.searchQuery })
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    },
    truncate(text, length) {
      if (!text) return ''
      return text.length > length ? text.substring(0, length) + '...' : text
    }
  }
}
</script>